<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="box1">1</div>
		<div class="box2">2</div>
		<div class="box3">3</div>
	</body>
</html>

<style type="text/css">
	/* 由于box1浮动，box3位置发生了改变 */
	/* 如果不希望某个元素浮动影响而改变位置，可以通过clear属性清楚浮动元素对当前元素的影响 */
	.box1{
		width: 200px;
		height: 200px;
		background-color: #FF0000;
		float: left;
	}
	.box2{
		width: 400px;
		height: 400px;
		background-color: #FF0000;
		float: right;
	}
	.box3{
		width: 200px;
		height: 200px;
		background-color: #FFFF00;
		/* clear:清除浮动元素对当前元素产生的影响 */
		/* left清楚左侧浮动元素对当前元素产生的影响 */
		/* right清楚右侧浮动元素对当前元素产生的影响 */
		/* 原理：产生一个上外边距 */
		clear: right;
	}
</style>